<template>
  <div class="dashboard-editor-container">
    <panel-group
      @handleSetLineChartData="handleSetLineChartData"
      :panelData="panelGroupData"
      :play="play"
    />

    <el-row
      v-if="currrntType != 'mytask'"
      style="background: #fff; padding: 16px 16px 0; margin-bottom: 16px"
    >
      <el-col :span="18">
        <bar-chart
          :BXdata="BXdata"
          :BSdata="BSdata"
          :BSname="BSname"
          :rend="rend"
        ></bar-chart>
      </el-col>
      <el-col :span="6">
        <pie-chart :PLdata="PLdata" :PSdata="PSdata" :rend="rend"></pie-chart>
      </el-col>
    </el-row>
    <el-row>
      <!--         :max-height="maxHeight" -->
      <el-table
        stripe
        :data="tableData"
        :header-cell-style="{ background: '#96C0DE' }"
        v-scrollbar="'.el-table__body-wrapper'"
      >
        <template v-for="column in tableColumns">
          <el-table-column
            :key="column.id"
            :label="column.label"
            :prop="column.prop"
            align="center"
          >
            <template slot-scope="scope">
              <span
                v-if="column.prop == 'name'"
                class="link-type"
                @click="jumpTo(scope.row)"
                >{{ scope.row[column.prop] }}</span
              >
              <span
                v-else-if="
                  ['stateid', 'typeid', 'policyid'].includes(column.prop)
                "
                >{{ dataFormat(column.prop, scope.row[column.prop]) }}</span
              ><span v-else-if="column.prop.indexOf('Time') > -1">{{
                scope.row[column.prop]
                  ? scope.row[column.prop].substring(0, 10)
                  : ''
              }}</span>
              <span v-else>{{ scope.row[column.prop] }}</span>
            </template>
          </el-table-column>
        </template>
      </el-table>
    </el-row>
  </div>
</template>

<script>
import PanelGroup from './dashboard/PanelGroup'
import BarChart from './dashboard/BarChart'
import PieChart from './dashboard/PieChart'
import { getDataList } from '@/api/dynamic/dynamic'

export default {
  inject: ['app'],
  name: 'Index',
  components: {
    PanelGroup,
    PieChart,
    BarChart
  },
  data() {
    return {
      allData: {},
      panelGroupData: {
        mydoc: {
          icon: 'form',
          name: 'mydoc'
        },
        mypro: {
          icon: 'job',
          name: 'mypro'
        },
        mytask: {
          icon: 'post',
          name: 'mytask'
        },
        mywbs: {
          icon: 'dict',
          name: 'mywbs'
        }
        // mygrp: {
        //   icon: 'list',
        //   name: 'mygrp'
        // }
      },
      chartData: {},
      play: false,
      currentChartData: {},
      currrntType: '',
      BXdata: [],
      BSdata: [],
      BSname: '',
      PLdata: [],
      PSdata: [],
      rend: false,
      tableData: [],
      tableColumns: [
        {
          label: '名称',
          prop: 'name'
        },
        {
          label: '类型',
          prop: 'typeid'
        },
        {
          label: '策略',
          prop: 'policyid'
        },
        {
          label: '状态',
          prop: 'stateid'
        },
        {
          label: '描述',
          prop: 'description'
        },
        {
          label: '创建时间',
          prop: 'createTime'
        },
        {
          label: '修改时间',
          prop: 'modifyTime'
        }
      ],
      pageParams: {
        mydoc: { treeMenu: 'type_Doc' },
        mypro: { treeMenu: 'type_project' },
        mywbs: { treeMenu: 'type_WBS' },
        mytask: { treeMenu: 'type_reimbursement' }
      },
      jumpType: {
        mydoc: '/doc',
        mypro: '/pmsproject',
        mywbs: '/pmswbs',
        mytask: '/reimbursement/user'
      }
    }
  },
  created() {
    this.getAllData()
  },
  computed: {
    maxHeight() {
      return this.app.screenHeight - 560
    }
  },
  methods: {
    getAllData() {
      let BXdata = []
      let BSdata = []
      let PLdata = []
      let PSdata = []
      let typeOptions = {}
      let optionData = JSON.parse(sessionStorage.getItem('optionsData'))
      optionData.typeOptions.forEach(item => {
        typeOptions[item.id] = item
      })
      let handle = false
      getDataList('/doc/mydoc').then(response => {
        this.allData['mydoc'] = response.rows
        for (let row of response.rows) {
          // if (row.typeid) {
          BXdata.push(row.name)
          BSdata.push(row.fileList.length)
          let index = PLdata.indexOf(typeOptions[row.typeid].description)
          if (index == -1) {
            PLdata.push(typeOptions[row.typeid].description)
            PSdata.push({
              name: typeOptions[row.typeid].description,
              value: 1
            })
          } else {
            PSdata[index].value++
          }
          // }
        }
        this.chartData.mydoc = {
          BSname: '文件数量',
          BXdata: BXdata,
          BSdata: BSdata,
          PLdata: PLdata,
          PSdata: PSdata
        }
        this.panelGroupData.mydoc.total = response.total
        this.panelGroupData.mydoc.title = '我的文档'
        // this.handleSetLineChartData("mydoc");
        if (!handle && response.total) {
          handle = 'mydoc'
        }
        getDataList('/workflow/myWorkflowInExecutionList').then(response => {
          BXdata = []
          BSdata = []
          PLdata = []
          PSdata = []
          this.allData['mypro'] = response.rows
          for (let row of response.rows) {
            if (row.typeid) {
              BXdata.push(row.name)
              BSdata.push(row.estimated)
              let index = PLdata.indexOf(typeOptions[row.typeid].description)
              if (index == -1) {
                PLdata.push(typeOptions[row.typeid].description)
                PSdata.push({
                  name: typeOptions[row.typeid].description,
                  value: 1
                })
              } else {
                PSdata[index].value++
              }
            }
          }
          this.chartData.mypro = {
            BSname: '持续时间',
            BXdata: BXdata,
            BSdata: BSdata,
            PLdata: PLdata,
            PSdata: PSdata
          }
          this.panelGroupData.mypro.total = response.total
          this.panelGroupData.mypro.title = '我的流程'
          if (!handle && response.total) {
            handle = 'mypro'
          }
          getDataList('/myWorkflow/myWorkflowActivityList').then(response => {
            BXdata = []
            BSdata = []
            PLdata = []
            PSdata = []
            this.allData['mytask'] = response.rows
            for (let row of response.rows) {
              if (row.typeid) {
                BXdata.push(row.name)
                BSdata.push(row.estimated)
                let index = PLdata.indexOf(typeOptions[row.typeid].description)
                if (index == -1) {
                  PLdata.push(typeOptions[row.typeid].description)
                  PSdata.push({
                    name: typeOptions[row.typeid].description,
                    value: 1
                  })
                } else {
                  PSdata[index].value++
                }
              }
            }
            this.chartData.mytask = {
              BSname: '持续时间',
              BXdata: BXdata,
              BSdata: BSdata,
              PLdata: PLdata,
              PSdata: PSdata
            }
            this.panelGroupData.mytask.total = response.total
            this.panelGroupData.mytask.title = '我的流程任务'
            if (!handle && response.total) {
              handle = 'mytask'
            }
            getDataList('/library/myLibrary?pageNum=1&pageSize=30').then(
              response => {
                BXdata = []
                BSdata = []
                PLdata = []
                PSdata = []
                this.allData['mywbs'] = response.rows
                for (let row of response.rows) {
                  if (row.typeid) {
                    BXdata.push(row.name)
                    BSdata.push(row.estimated)
                    let index = PLdata.indexOf(
                      typeOptions[row.typeid].description
                    )
                    if (index == -1) {
                      PLdata.push(typeOptions[row.typeid].description)
                      PSdata.push({
                        name: typeOptions[row.typeid].description,
                        value: 1
                      })
                    } else {
                      PSdata[index].value++
                    }
                  }
                }
                this.chartData.mywbs = {
                  BSname: '持续时间',
                  BXdata: BXdata,
                  BSdata: BSdata,
                  PLdata: PLdata,
                  PSdata: PSdata
                }
                this.panelGroupData.mywbs.total = response.total
                this.panelGroupData.mywbs.title = '我的文档库'
                if (!handle && response.total) {
                  handle = 'mywbs'
                }

                this.handleSetLineChartData(handle)
                this.play = true
              }
            )
          })
        })
      })
    },
    handleSetLineChartData(type) {
      if (type != this.currrntType) {
        if (type == 'mydoc') this.tableColumns[4].prop = 'title'
        else this.tableColumns[4].prop = 'description'
        this.tableData = this.allData[type]
        this.currrntType = type
        this.BSname = this.chartData[type].BSname
        this.BXdata = this.chartData[type].BXdata
        this.BSdata = this.chartData[type].BSdata
        this.PLdata = this.chartData[type].PLdata
        this.PSdata = this.chartData[type].PSdata
        this.rend = !this.rend
      }
    },
    jumpTo(row) {
      let params = {}
      params.pageParams = this.pageParams[this.currrntType]
      params.rowParams = row
      params.type = this.jumpType[this.currrntType]
      params.pageParams.url = '/' + params.type + '/{id}'
      this.$router.push({ path: '/dynamic/details/' + row.id, query: params })
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 10px;
  background-color: rgb(240, 242, 245);
  position: relative;
  height: 100%;
  box-sizing: border-box;
  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
